<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>购物车</title>
    <link type="text/css" rel="stylesheet" href="style/reset.css">
    <link type="text/css" rel="stylesheet" href="style/main.css">
</head>
<body>
<div class="headerBar">
    <div class="topBar">
        <div class="comWidth">
            <div class="leftArea">
                <a href="#" class="collection">收藏慕课</a>
            </div>
            <div class="rightArea">
                欢迎来到慕课网!<a href="#">[登陆]</a><a href="#">[免费注册]</a>
            </div>
        </div>
    </div>
    <div class="logoBar">
        <div class="comWidth">
            <div class="logo fl">
                <a href="#"><img src="images/icon/logo.png" alt="慕课网"></a>
            </div>
            <div class="stepBox fr">
                <div class="step">
                </div>
                <ul class="step_text">
                    <li class="s01 active">我的购物车</li>
                    <li class="s02 active">填写核对订单</li>
                    <li class="s03">订单提交成功</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="navBox">
        <div class="comWidth">
            <div class="shopClass fl">
                <h3>全部商品分类<i></i></h3>

                <div class="shopClass_show hide">
                    <dl class="shopClass_item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#">数码</a>
                            <a href="#" class="aLink">合约机</a>
                        </dt>
                        <dd>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dd>
                    </dl>

                    <dl class="shopClass_item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#">数码</a>
                            <a href="#" class="aLink">合约机</a>
                        </dt>
                        <dd>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dd>
                    </dl>

                    <dl class="shopClass_item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#">数码</a>
                            <a href="#" class="aLink">合约机</a>
                        </dt>
                        <dd>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dd>
                    </dl>

                    <dl class="shopClass_item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#">数码</a>
                            <a href="#" class="aLink">合约机</a>
                        </dt>
                        <dd>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dd>
                    </dl>
                </div>
            </div>
            <ul class="nav fl">
                <li><a href="#" class="active">数码城</a></li>
                <li><a href="#">天黑黑</a></li>
                <li><a href="#">团购</a></li>
                <li><a href="#">发现</a></li>
                <li><a href="#">二手特卖</a></li>
                <li><a href="#">唯品会</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="shoppingCart comWidth">
    <div class="shopping_item">
        <h3 class="shopping_title">收货信息</h3>

        <div class="shopping_cont padding_shop">
            <ul class="shopping_list">
                <li><span class="shopping_list_text"><em>*</em>选择地区:</span>

                    <div class="select">
                        <h3>海淀区五环内</h3>
                        <span></span>
                        <ul class="show_select">
                            <li>上地</li>
                            <li>龙泽</li>
                            <li>五道口</li>
                        </ul>
                    </div>
                </li>
                <li><span class="shopping_list_text"><em>*</em>详细地址:</span><input type="text" value="最多可输入20个汉字"
                                                                                  class="input"></li>
                <li><span class="shopping_list_text"><em>*</em>收货人:</span><input type="text" value="最多可输入10个汉字"
                                                                                 class="input"></li>
                <li><span class="shopping_list_text"><em>*</em>手机:</span><input type="text" value="如：15330272033"
                                                                                class="input">
                    <span class="cart_tel">&nbsp;或固定电话:</span><input type="text" value="区号" class="input input_s"><span class="jian">-</span><input
                            type="text" value="电话号码" class="input input_s2"><span class="jian">-</span><input
                            type="text" value="" class="input"></li>
                <li><input type="button" class="confirm"></li>
            </ul>
        </div>
    </div>
    <div class="hr_25"></div>
    <div class="shopping_item">
        <h3 class="shopping_title">支付方式</h3>

        <div class="shopping_cont padding_shop">
            <ul class="shopping_list">
                <li><input type="radio" id="r1" class="radio"><label for="r1">微信支付</label>打开微信支付</li>
                <li><input type="radio" id="r2" class="radio"><label for="r1">收到付款</label>打开货到付款</li>
            </ul>
        </div>
    </div>

    <div class="hr_25"></div>
    <div class="shopping_item">
        <h3 class="shopping_title">送货清单<a href="#" class="backCart">返回购物车修改</a></h3>

        <div class="shopping_cont pb_10">
            <div class="cart_inner">
                <div class="cart_head clearfix">
                    <div class="cart_item t_name">商品名称</div>
                    <div class="cart_item t_price">单价</div>
                    <div class="cart_item t_return">返现</div>
                    <div class="cart_item t_num">数量</div>
                    <div class="cart_item t_subtotal">小计</div>
                </div>

                <div class="cart_cont clearfix">
                    <div class="cart_item t_name">
                        <div class="cart_shopInfo clearfix">
                            <img src="images/icon/cart_shop_icon.png" alt="log">

                            <div class="cart_shopInfo_cont">
                                <p class="cart_link"><a href="#">慕课网(IMOOC)</a></p>

                                <p class="cart_info"><a href="#">学习编程最简单的免费平台</a></p>
                            </div>
                        </div>
                    </div>
                    <div class="cart_item t_price">￥1459.00</div>
                    <div class="cart_item t_return">￥0.00</div>
                    <div class="cart_item t_num">1</div>
                    <div class="cart_item t_subtotal t_red">￥1459.00</div>
                </div>
            </div>
            <div class="cart_message">
                若有问题请留言
            </div>
            <div class="cart_prompt"><i class="cart_prompt_icon"></i>抱歉以下商品无法购买</div>
            <div class="cart_cont cart_no_bor clearfix">
                <div class="cart_item t_name">
                    <div class="cart_shopInfo clearfix">
                        <img src="images/icon/cart_shop_icon.png" alt="log">

                        <div class="cart_shopInfo_cont">
                            <p class="cart_link"><a href="#">慕课网(IMOOC)</a></p>

                            <p class="cart_info"><a href="#">学习编程最简单的免费平台</a></p>
                        </div>
                    </div>
                </div>
                <div class="cart_item t_price">￥1459.00</div>
                <div class="cart_item t_return">￥0.00</div>
                <div class="cart_item t_num">1</div>
                <div class="cart_item t_subtotal t_red">￥1459.00</div>
            </div>
        </div>
    </div>

    <div class="hr_25"></div>

    <div class="shopping_item">
        <h3 class="shopping_title">订单结算</h3>
        <div class="shopping_cont padding_shop clearfix">
            <div class="cart_count fr"><!-- 它浮动了一定要把它的父级元素清浮动 -->
                <div class="cart_rmb">
                    <i>总计:</i><span>1459.00</span>
                </div>
                <div class="cart_btnBox">
                    <input type="button" class="cart_btn" value="提交订单" />
                </div>
        </div>
    </div>
</div>
</div>

<div class="hr_25"></div>
<!-- 底部 -->
<div class="footer">
    <p><a href="#">慕课简介</a><i>|</i><a href="#">慕课公告</a><i>|</i><a href="#">招贤纳士</a><i>|</i><a
            href="#">联系我们</a><i>|</i><a href="#">客服热线:0722-4818111</a></p>

    <p>关于我们常见问题反馈意见全站地图京ICP证030173号</p>

    <p class="web"><a href="#"><img src="images/icon/bottom_logo.png" alt="logo"></a><a href="#"><img
            src="images/icon/bottom_logo.png"
            alt="logo"></a><a href="#"><img
            src="images/icon/bottom_logo.png" alt="logo"></a><a href="#"><img src="images/icon/bottom_logo.png"
                                                                              alt="logo"></a></p>
</div>
</body>
</html>